<template>
  <vxe-grid
    ref="xGrid"
    border
    resizable
    highlight-current-row
    show-header-overflow
    highlight-hover-row
    show-overflow
    :height="tableConfig.height"
    :data="tableConfig.tableData"
    :columns="tableConfig.tableColumn"
    :seq-config="{
      startIndex: (pagerConfig.currentPage - 1) * pagerConfig.pageSize,
    }"
    :tree-config="tableConfig.treeConfig || false"
    :toolbar-config="tableConfig.tableToolbar"
    @checkbox-all="checkboxChange"
    @checkbox-change="checkboxChange"
  >
    <template #toolbar_buttons>
      <slot name="header" />
    </template>
    <!-- <template #toolbar_tools="{ row }">
      <el-dropdown>
        <span class="el-dropdown-link">
          <vxe-button transfer icon="vxe-icon--plus" circle />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="i in tableConfig.toolbarTools"
            :key="i.emit"
            @click.native="$emit(i.emit, row)"
          >{{ i.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template> -->
    <template #operate="{ row }">
      <template v-for="i in tableConfig.operateBtns">
        <el-button
          :key="i.emit"
          plain
          :type="i.type"
          v-show="row[i.parameter] == i.value"
          @click.stop="$emit(i.emit, row)"
          >{{ i.name }}
        </el-button>
      </template>
    </template>
    <template #pager>
      <vxe-pager
        v-if="tableConfig.tablePage"
        :layouts="[
          'Total',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
        ]"
        style="text-align: center"
        :current-page.sync="pagerConfig.currentPage"
        :page-size.sync="pagerConfig.pageSize"
        :total="pagerConfig.total"
        @page-change="handlePageChange"
      />
    </template>
  </vxe-grid>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    tableConfig: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      pagerConfig: {
        total: 30,
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  created() { },
  methods: {
    uploadFileEvent(callBack) {
      // 导入
      const $grid = this.$refs.xGrid;
      $grid
        .readFile({
          multiple: true,
          types: ["xlsx", "csv", "html", "xls"]
        })
        .then(params => {
          const { files } = params;
          callBack(files);
        });
    },
    checkboxChange(val) {
      this.$emit("checkboxChange", val.records);
    },
    handlePageChange() { }
  },
  watch: {
    tableConfig: {
      handler(val) {
        console.log(val, 789);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.vxe-grid::v-deep {
  background-color: #10121a;
  margin-top: 0.05rem;
  .vxe-tools--wrapper {
    margin-right: 0.12rem;
  }
  .vxe-toolbar {
    background-color: transparent;
    height: 0.4rem;
  }
  .vxe-table {
    margin-top: 0.05rem;
  }
  .vxe-table--render-default .vxe-table--body-wrapper,
  .vxe-table--render-default .vxe-table--footer-wrapper {
    background-color: transparent;
  }
  .vxe-table--render-default.border--full .vxe-body--column,
  .vxe-table--render-default.border--full .vxe-footer--column,
  .vxe-table--render-default.border--full .vxe-header--column {
    font-size: 0.12rem;
    // padding: 0.21rem 0;
    color: #b6c2d7;
    background-image: linear-gradient(#1f2b3d, #1f2b3d),
      linear-gradient(#1f2b3d, #1f2b3d);
  }
  .vxe-table--render-default.border--full .vxe-body--column.operate .el-button {
    background-color: transparent;
    border: none;
    padding: 1px;
    font-size: 0.14rem;
  }
  .vxe-table--render-default.border--full .vxe-body--column .el-tag {
    background-color: transparent;
    padding: 4px;
    height: auto;
    line-height: 0.12rem;
  }
  .vxe-table--render-default.border--default .vxe-table--header-wrapper,
  .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
    background-color: transparent;
  }
  .vxe-table--render-default.border--full .vxe-table--header-wrapper {
    background-color: #1e202d;
  }
  .vxe-table--render-default.border--full .vxe-header--column {
    color: #fff;
  }
  .vxe-pager {
    background-color: transparent;
    .vxe-pager--jump-next,
    .vxe-pager--jump-prev,
    .vxe-pager--next-btn,
    .vxe-pager--num-btn,
    .vxe-pager--prev-btn {
      background-color: transparent;
      font-size: 0.15rem;
      color: #fff;
    }
    .vxe-pager--num-btn.is--active {
      color: #409eff;
    }
    .vxe-pager--jump .vxe-pager--goto {
      background-color: transparent;
      border-color: #3af4f533;
      height: 1.5em;
      font-size: 0.15rem;
    }
  }
  .vxe-table--render-default .vxe-body--row.row--current,
  .vxe-table--render-default .vxe-body--row.row--hover {
    background-color: #ffffff24;
  }

  .vxe-table--header-wrapper .vxe-table--header-border-line {
    border-color: #ffffff24;
  }
  .vxe-table--render-default .vxe-table--border-line {
    border-color: #000;
  }
  .operate{
    text-align: left;
  }
}
</style>
